<!--  -->
<template>
    <div :class="`header-info ${btmBordered ? 'btmBorder' : ''} ${rightBordered ? 'rightBordered' : ''}`">
        <span>{{ title }}</span>
        <p>{{value}}<span style="display: inline-block;color: #666666;font-size: 14px;font-weight: 400;" v-if="desc != ''" >{{desc}}</span></p>
    </div>
</template>

<script>
export default {
    name: 'StatisInfo',
    props: {
        title: {
            type: String,
            default: ''
        },
        value: {
            default: ''
        },
        btmBordered: {
            type: Boolean,
            default: true
        },
        rightBordered: {
            type: Boolean,
            default: true,
        },
        desc: {
            default: ''
        }
    },
    data () {
        return {
            
        };
    },

    methods: {}
}

</script>
<style scoped>
.header-info{
    /* padding-left: 20px; */
    padding: 20px 20px 3px 20px;
    height: 100%;
}
.btmBorder{
    border-bottom: 1px solid #DDDDDD;
}
.rightBordered{
    border-right: 1px solid #DDDDDD;
}
.header-info span{
    display: block;
    line-height: 22px;
    font-size: 14px;
    color: #666666;
    margin-bottom: 10px;
}
.header-info p{
    font-size: 19px;
    line-height: 32px;
    color: #333333;
    font-weight: 500;
}
</style>